<template>
  <Drawer title="主题美化"
          :width="450"
          placement="left"
          :closable="false"
          :mask-closable="false"
          :draggable="false"
          transfer
          v-model="visible"
          :styles="$PnUtil.buildDrawerStyleByHasFooter()">

    <Divider orientation="left" style="margin-top: 0px;">当前页面主题方案</Divider>
    <div class="theme-card-item" >
      <div class="color-item"
           v-for="(color, index) in currentPageThemeJson.color" :key="index">
        <div class="color-lump"
             :class="{'none-color': !currentPageThemeJson.color[index]}"
             :style="{backgroundColor: color}"></div>
      </div>
      <div class="clearfix"></div>
    </div>

    <Tabs :value="'sysThemePane'">
      <TabPane label="系统主题" name="sysThemePane">
        <div class="theme-card-item"
             :class="{'active': currentSelectThemeId == theme.id}"
             v-for="(theme, index) in sysThemes" :key="index" @click.stop="themeItemClickHandler(theme)">
          <p>{{ theme.name }}</p>
          <div class="color-item" v-for="(color, index2) in JSON.parse(theme.json_text).color" :key="index2">
            <div class="color-lump"
                 :class="{'none-color': !JSON.parse(theme.json_text).color[index]}"
                 :style="{backgroundColor: color}">

            </div>
          </div>
          <div class="clearfix"></div>
        </div>
      </TabPane>
      <TabPane label="我的主题" name="myThemePane">
        <div class="theme-card-item"
             :class="{'active': currentSelectThemeId == theme.id}"
             v-for="(theme, index) in myThemes" :key="index" @click.stop="themeItemClickHandler(theme)">
          <p>{{ theme.name }}</p>
          <div class="color-item" v-for="(color, index2) in JSON.parse(theme.json_text).color" :key="index2">
          <div class="color-lump"
               :class="{'none-color': !JSON.parse(theme.json_text).color[index]}"
               :style="{backgroundColor: color}">

          </div>
        </div>
          <div class="clearfix"></div>
        </div>
      </TabPane>
    </Tabs>

    <DrawerFooter>
      <Button class="m-r-5px" @click="cancel">取消</Button>
      <Button type="primary" @click="submitThemeJson"><Icon type="md-checkmark" /> 确认应用</Button>
    </DrawerFooter>
  </Drawer>
</template>

<script>

  import { createHelpers } from 'vuex-map-fields';

  const { mapFields } = createHelpers({
    getterType: 'designer/getField',
    mutationType: 'designer/updateField',
  });

  export default {
    name: "ChangeThemeDrawer",
    props: {
      show: {
        type: Boolean
      }
    },
    data() {
      return {
        visible: this.show,
        sysThemes: [],
        myThemes: [],
        currentPageThemeJson: '',
        currentSelectThemeId: '',
        isSubmit: false
      }
    },
    mounted() {

    },
    methods: {

      init (theme_json) {
        this.$PnApi.EchartThemeApi.getSysEchartThemes().then(result => {
          this.sysThemes = result.data.payload
        })
        this.$PnApi.EchartThemeApi.getMyEchartThemes().then(result => {
          this.myThemes = result.data.payload
        })
        if (theme_json) {
          this.currentPageThemeJson = theme_json;
          localStorage.setItem('tempThemeJson', JSON.stringify(theme_json))
        }
      },

      themeItemClickHandler (themeItem) {
        this.currentSelectThemeId = themeItem.id;
        let theme_json = JSON.parse(themeItem.json_text);
        this.$store.commit('designer/setPageThemeJson', theme_json)
        // this.pageMetadata.layout.layoutItems.forEach(layoutItem => {
        //   if (layoutItem.component.id) {
        //     this.$EventBus.$emit('pn_theme_change_' + layoutItem.component.id, theme_json)
        //   }
        // })
        let allEchartsDom = $("div[id*='chart-']"); // 模糊查询当前页面中所有Echarts图表容器DOM
        for (let i=0; i<allEchartsDom.length; i++) {
          this.$EventBus.$emit('pn_theme_change_' + allEchartsDom[i].id, theme_json)
        }
      },

      submitThemeJson () {
        if (this.currentSelectThemeId) {
          this.$Modal.confirm({
            title: '提醒',
            content: '是否确定应用此主题方案？确定之后，将会以新的主题方案应用于当前编辑页面并自动保存',
            onOk: () => {
              this.isSubmit = true
              this.$EventBus.$emit('pn_save_current_page');
              this.cancel()
            }
          });
        }else {
          this.$Message.warning('并未选中任何一个主题方案')
        }
      },

      cancel () {
        this.visible = false;
        this.$emit('cancel', this.visible)
        if (this.isSubmit) {
          this.isSubmit = false
        }else {
          let tempThemeJson = JSON.parse(localStorage.getItem('tempThemeJson'));
          this.$store.commit('designer/setPageThemeJson', tempThemeJson);
          if (this.currentSelectThemeId) {
            // this.pageMetadata.layout.layoutItems.forEach(layoutItem => {
            //   if (layoutItem.component.id) {
            //     this.$EventBus.$emit('pn_theme_change_' + layoutItem.component.id, tempThemeJson)
            //   }
            // })
            let allEchartsDom = $("div[id*='chart-']"); // 模糊查询当前页面中所有Echarts图表容器DOM
            for (let i=0; i<allEchartsDom.length; i++) {
              this.$EventBus.$emit('pn_theme_change_' + allEchartsDom[i].id, tempThemeJson)
            }
          }
        }
        this.currentSelectThemeId = '';
      }
    },
    computed: {
      ...mapFields({
        pageMetadata: 'pageMetadata'
      })
    },
    watch: {
      show (val) {
        this.visible = val
      }
    }
  }
</script>

<style lang="less" scoped>
  .theme-card-item {
    width: 100%;
    height: auto;
    padding: 10px;
    background-color: #eeeeee;
    box-sizing: border-box;
    border: 2px solid #757575;
    border-radius: 4px;
    margin-bottom: 10px;
    color: #424242;
    &:hover {
      border-color: #2196f3;
      box-shadow: 0px 0px 5px #000000;
    }
    &.active {
      border-color: #2196f3;
      box-shadow: 0px 0px 5px #000000;
    }
    .color-item {
      width: 48px;
      float: left;

      .color-lump {
        width: 100%;
        height: 30px;
        &.none-color {
          background-color: #fff;
          text-align: center;
          &:after {
            content: '空';
            color: #e57373;
          }
        }
      }
    }
  }
</style>
